<template>
  <a-button type="link" style="padding: 4px 6px" @click="onClick">
    编辑
  </a-button>
  <role-drawer
    v-model:open="editOpen"
    v-model:title="editTitle"
    :context-data="propsDrawerData"
    @edit="handleEdit"
  />
</template>
<script setup>
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import { useDataSourceManager } from './provide-context.js'
import RoleDrawer from './role-drawer.vue'
import { editRole } from '@/api/role.js'

/**
 * 全局数据
 */
let { update } = useDataSourceManager()
let propsDrawerData = ref({})
let editOpen = ref(false)
let editTitle = ref('编辑角色')

/**
 * 外部参数
 */
let props = defineProps({
  data: { type: Object, required: true },
})

/**
 * 编辑操作
 */
function onClick() {
  editOpen.value = true
  propsDrawerData.value = {
    btnType: 'edit',
    data: props.data,
  }
}
async function handleEdit(data) {
  try {
    await editRole(data)
    await update()
    message.success('修改成功')
  } catch (e) {
    message.error('修改失败')
  }
}
</script>
